<script lang="ts" setup>
import { ref } from 'vue'
import type { DrawerOptions } from '@/interfaces/components/drawerForm'
import useRequest from '@/hooks/requestHooks'

const requestUtils = useRequest()

export interface DrawerProps {
  show: boolean
  options?: DrawerOptions
  rules?: any
  formData: any
  submitAxios: any
}
const props = defineProps<DrawerProps>()
const emit = defineEmits(['close'])

const formRef = ref<any>(null)
const loading = ref<any>(false)
const submitForm = () => {
  formRef.value.validate(async (errors: any) => {
    if (!errors) {
      const res = (await requestUtils.useLoadingRequest<any>({
        axios: props.submitAxios(props.formData),
        loadings: loading,
      })) as any
      if (res.data.code === 200) {
        emit('close')
      }
    }
  })
}
const closeDrawer = () => {
  emit('close')
}
</script>

<template lang="pug">
n-drawer(@mask-click="closeDrawer" v-model:show="props.show" :width="props.options?.width" :height="props.options?.height" :placement="props.options?.placement")
  n-drawer-content(v-if="props?.options?.title" :title="props.options.title")
    n-space(vertical)
      n-button(type="primary" @click="submitForm" :loading="loading") 保存
      n-form(inline ref="formRef" :model="props.formData" :rules="props.rules")
        slot(name="form")
</template>

<style lang="scss" scoped></style>
